<template>
    <div class="home " :class="isPc ? 'flexR-Cen' : 'flexC-FS-C'">
        <div
            v-for="(item, index) in list" :key="index" class="box" :class="isPc ? 'flexC-Cen' : 'flexR-SB-C'"
            @click="!isPc && handleJump(index)"
        >
            <el-image class="image" :src="item.img" fit="cover" />
            <el-button
                v-if="isPc" class="button" :class="`button${index + 1}`" type="primary" size="small"
                @click="isPc && handleJump(item.code)"
            >
                {{ item.title }}
            </el-button>
            <template v-else>
                <el-button
                    class="button" :class="`button${index + 1}`" type="primary" size="small"
                    @click="isPc && handleJump(item.code)"
                >
                    {{ item.title }}
                    <el-image class="jumpImg" :src="leftCircleImg" fit="cover" />
                </el-button>
                <!-- <span class="title">{{ item.title }}</span> -->
                <!-- <span class="icon iconfont icon-jiantou1" /> -->
            </template>
        </div>
    </div>
</template>

<script setup>
import img1 from '@/assets/images/contract/1.png'
import img2 from '@/assets/images/contract/2.png'
import leftCircleImg from '@/assets/images/contract/left-circle.png'
import commonData from '@/hooks/commonData'

const { router, isPc, setContractData } = commonData()
const list = [
    {
        code: 0,
        title: '总包立项',
        img: img1
    },
    {
        code: 1,
        title: '内部委托',
        img: img2
    }
]

function handleJump(index) {
    const pathStr = (index === 0) ? '/projects' : '/branchProject'
    setContractData({
        lxyt: index
    })
    router.push({ path: pathStr })
}
</script>

<style lang="scss" scoped>
.home {
    width: 100vw;
    height: 100vh;
}
[data-mode="pc"] {
    .box {
        width: 21%;
        background: #fff;
        border-radius: 10px;
        margin-right: 94px;
        padding: 70px 0;
        box-shadow: rgb(8 61 135 / 30%) 0 2px 38px 0;
        .image {
            width: 150px;
        }
        .button {
            width: 70%;
            font-size: 15px;
            margin-top: 47px;
            color: #fff;
            letter-spacing: 1px;
            padding: 10px 20px;
            box-shadow: rgb(0 7 26 / 8%) 0 5px 30px 0;
            border-radius: 32px;
            background: rgb(8 61 135 / 96%);
        }
        .button1 {
            background: rgb(8 61 135 / 96%);
        }
        .button2 {
            background: #467ac3;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}
[data-mode="mobile"] {
    .home {
        box-sizing: border-box;
        padding: 0 15px;
        .box {
            width: 100%;
            padding: 24px 30px;
            margin-top: 23px;
            background: #fff;
            border-radius: 4px;
            // box-shadow: rgb(0 7 26 / 8%) 0 5px 30px 0;
            box-shadow: var(--el-box-shadow);
            .image {
                width: 90px;
            }
            .button {
                border-radius: 18px;
                font-size: 16px;
                color: #fff;
                letter-spacing: 1px;
                padding: 18px 30px;
                box-shadow: rgb(0 7 26 / 8%) 0 5px 30px 0;
                .jumpImg {
                    width: 15px;
                    margin-left: 10px;
                }
            }
            .button1 {
                background: rgb(8 61 135 / 96%);
            }
            .button2 {
                background: #467ac3;
            }
            &:last-child {
                margin-right: 0;
            }
            .title {
                font-size: 16px;
                color: #0c0c0c;
            }
            .icon {
                margin-right: 20px;
                font-size: 18px;
                color: rgb(0 0 0 / 100%);
            }
        }
    }
}
</style>
